import $ from 'jquery'
import React, { Component } from "react";
import ReactDOM from 'react-dom';
import "./index.css";
import guangzhours from "./images/guangzhours.png";

class SearchResultList extends React.Component {
	render() {
		const resultItems = this.props.data;
		const listItems = resultItems.map((item) =>
			<li key={item.id}>
				{item.name}
			</li>
		);
 
		return (
			<ul>{listItems}</ul>
		);
	}
}
 
class SearchResult extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			loading: true,
		    error: null,
		    data: null
		};
	}
 
	componentWillUpdate() {
 
		$.ajaxSetup({
		  async: true
		});
		$.getJSON('   '+this.props.searchText, (result) => {
			console.log(typeof(result));
			console.log(result.items);
			this.setState({loading: false, data: result.items});
		});
	}
	
	render() {
		if(this.state.data) {
			return (
				<div>
					<SearchResultList data={this.state.data} />
				</div>
			);
			
		}
		else {
			return (
				<div></div>
			);
		}
	}
}
 
class SearchInput extends React.Component {
	constructor(props) {
	    super(props);
	    this.handleSearchTextInputChange = this.handleSearchTextInputChange.bind(this);
	 }
  
	handleSearchTextInputChange(e) {
	    this.props.onSearchTextInput(e.target.value);
	}
	render() {
		return (
			<form>
				<input 
					type="text" 
					placeholder="Search..." 
					value={this.props.searchText} 
					onChange={this.handleSearchTextInputChange}
				/>
			</form>
		);
	}
}
 
class SearchBox extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			searchText: ''
		};
 
		this.handleSearchTextInput = this.handleSearchTextInput.bind(this);
	}
 
	handleSearchTextInput(searchText) {
    	this.setState({
      		searchText: searchText
    	});
  	}
 
	render() {
		return (
			<div className={styles.searchBox}>
				<SearchInput 
					searchText={this.state.searchText} 
					onSearchTextInput={this.handleSearchTextInput}
				/>
				<SearchResult 
					searchText={this.state.searchText} 
				/>
			</div>
		);
	}
}

export default class Header extends Component {
  render() {
    return (
      <div id="header">
        <center>
          <div style={{ paddingTop:'10px',paddingBottom:'10px'}}>
            <img src={guangzhours} id="redImg" />
          </div>

        </center>
      </div>
    );
  }
}